﻿@namespace Aspire.Dashboard.Components
@using Aspire.Dashboard.Model
@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@inherits FluentComponentBase

<FluentButton Id="@MenuButtonId" Appearance="@ButtonAppearance" aria-haspopup="true" aria-expanded="@_visible" @onclick="ToggleMenu" @onkeydown="OnKeyDown" Disabled="@(!Items.Where(i => !i.IsDivider).Any())">
    @if (string.IsNullOrWhiteSpace(Text))
    {
        <FluentIcon Value="@_icon" />
    }
    else
    {
        @Text
        <FluentIcon Value="@_icon" Slot="end" />
    }
</FluentButton>

<FluentMenu Anchor="@MenuButtonId" aria-labelledby="button" @bind-Open="@_visible" VerticalThreshold="200">
    @foreach (var item in Items)
    {
        @if (item.IsDivider) 
        {
            <FluentDivider />
        }
        else
        {
            <FluentMenuItem OnClick="() => HandleItemClicked(item)" title="@item.Tooltip">
                @item.Text
                @if (item.Icon != null)
                {
                    <span slot="start">
                        <FluentIcon Value="@item.Icon" Style="vertical-align: middle;" />
                    </span>
                }
            </FluentMenuItem>
        }
    }
</FluentMenu>
